<template>
  <view class="pre-result shadow-warp" v-if="info">
    <view class="box-header text-white text-center">上期结果</view>
    <view class="box-content">
      <view class="box-attr">
        <view class="box-attr-key">名称：</view>
        <view class="box-attr-key">{{ info.name }}</view>
      </view>
      <view class="box-attr">
        <view class="box-attr-key">编号：</view>
        <view class="box-attr-key">{{ info.no }}</view>
      </view>
      <view class="box-attr">
        <view class="box-attr-key">性别：</view>
        <view class="box-attr-key">{{ info.sex === 1 ? "男" : "女" }}</view>
      </view>
      <view class="box-attr">
        <view class="box-attr-key">魔法：</view>
        <view class="box-attr-key">{{ info.magic === 1 ? "有" : "无" }}</view>
      </view>
      <view class="box-attr">
        <view class="box-attr-key">远程：</view>
        <view class="box-attr-key">{{ info.remote === 1 ? "远程" : "近战" }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "preResult",
  props: {
    info: Object
  }
};
</script>

<style lang="scss" scoped>
.pre-result {
  .box-header {
    line-height: 50upx;
    font-size: 24upx;
    background-color: #000000;
    opacity: 0.9;
  }
  .box-content {
    background: #000000;
    opacity: 0.65;
    padding: 0 0 10upx 0;
    // border: 1px solid #007AFF;
    box-sizing: border-box;
    .box-avatar {
      height: 160upx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .box-attr {
      font-size: 20upx;
      padding: 0 20upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
